{% extends 'base.html' %}
{% block css %}
    <style>
        #div_digg {
            float: right;
            margin-bottom: 10px;
            margin-right: 30px;
            font-size: 12px;
            width: 125px;
            text-align: center;
            margin-top: 10px;
        }

        .diggit {
            float: left;
            width: 46px;
            height: 52px;
            background: url('/static/images/upup.gif') no-repeat;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }

        .buryit {
            float: right;
            margin-left: 20px;
            width: 46px;
            height: 52px;
            background: url('/static/images/downdown.gif') no-repeat;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }

        .clear {
            clear: both;
        }

        .diggword {
            margin-top: 5px;
            margin-left: 0;
            font-size: 12px;
            color: red;
        }
    </style>
{% endblock %}
{% block content %}
    {# 文章内容开始 #}
    <h1>{{ article_obj.title }}</h1>
    <div class="article_content">
        {{ article_obj.content|safe }}
    </div>
    {# 文章内容开结束 #}
    {# 点赞点踩样式开始 #}
    <div id="div_digg">
        <div class="diggit action">
            <span class="diggnum" id="digg_count">{{ article_obj.up_num }}</span>
        </div>
        <div class="buryit action">
            <span class="burynum" id="bury_count">{{ article_obj.down_num }}</span>
        </div>
        <div class="clear"></div>
        <div class="diggword" id="digg_tips">
        </div>
    </div>
    {# 点赞点踩样式结束 #}
    {# 评论展示开始 #}
    <div>
        <ul class="list-group">
            {# #1楼 发表时间 发表用户 #}
            {% for comment_obj in comment_queryset %}
                <li class="list-group-item">
                    <span>#{{ forloop.counter }}楼</span>
                    <span>{{ comment_obj.comment_time|date:'Y-m-d h:i:s' }}</span>
                    <span>{{ comment_obj.user.username }}</span>
                    <span class="pull-right">
                        <a class="replay" username="{{ comment_obj.user.username }}" comment_id="{{ comment_obj.pk }}">回复</a>
                    </span>
                    <div>{{ comment_obj.content }}</div>
                </li>
            {% endfor %}
        </ul>
    </div>
    {# 评论展示结束 #}
    {# 评论样式开始 #}
    {% if request.user.is_authenticated %}
        <div>
            <p><span class="glyphicon glyphicon-comment"></span>&nbsp;&nbsp;发表评论</p>
            <div>
                <textarea name="comment" id="id_comment" cols="60" rows="10"></textarea>
            </div>
            <button id="id_commit" class="btn btn-primary">提交评论</button>
            <span style="color: red" id="comment_tips"></span>
        </div>
    {% else %}
        <p><span class="glyphicon glyphicon-comment"></span>&nbsp;&nbsp;登录后才能查看或发表评论，立即<a href="/login/">登录</a>或者<a
                href="{% url 'home' %}">逛逛</a>首页</p>
    {% endif %}
    {# 评论样式结束 #}
{% endblock %}
{% block js %}
    <script>
        $('.action').click(function () {
            // 点赞和点踩的区别在于是否有diggit类
            let is_up = $(this).hasClass('diggit');
            let $div = $(this);
            // 发送ajax请求
            $.ajax({
                url: '/up_or_down/',
                type: 'post',
                data: {
                    'article_id': '{{ article_obj.pk }}',
                    'is_up': is_up,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function (args) {
                    if (args.code === 1) {
                        $('#digg_tips').text(args.msg)
                        // 成功之后,需要给对应的数字加一显示
                        // 获取到div原来的数字,在原来的基础上加一
                        let oldNum = $div.children().text();
                        $div.children().text(Number(oldNum) + 1)
                    } else {
                        $('#digg_tips').html(args.msg)
                    }
                }
            })
        });
        // 在全局设置一个parentId
        let parentId = null;
        // 点击评论
        $('#id_commit').click(function () {
            let content = $('#id_comment').val();
            $.ajax({
                url: '/comment/',
                type: 'post',
                data: {
                    'article_id': '{{ article_obj.pk }}',
                    'content': content,
                    'parent_id': parentId,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function (args) {
                    if (args.code === 1) {
                        $('#comment_tips').text(args.msg)
                        // 将评论框里面的内容清空
                        $('#id_comment').val('')
                        // 临时渲染评论样式
                        let username = '{{ request.user.username }}'
                        let tep = `
                                    <li class="list-group-item">
                                       <span>${username}</span>
                                       <div>${content}</div>
                                    </li>
                        `
                        // 将生成好的标签添加到ul内部
                        $('.list-group').append(tep);
                        // 清空全局的parentId
                        parentId = null;
                    } else {
                        $('#comment_tips').text(args.msg)
                    }
                }
            })
        });
        // 评论回复--子评论
        // 回复按钮的点击事件
        $('.replay').click(function () {
            let commentUser = $(this).attr('username');
            parentId = $(this).attr('comment_id');
            $('#id_comment').focus().val('@' + commentUser + '\n')
        })
    </script>
{% endblock %}